<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #canvas {
            background-color: gray;
        }
    </style>
</head>
<body>
<canvas height="400" id="canvas" width="400"></canvas>
<script src="../lib/index.js"></script>
<script>
    const ctx = document.getElementById('canvas');
    const gl = ctx.getContext('webgl');
    const vertexShaderSource = `
    attribute vec4 aPosition;
    void main() {
       gl_Position = aPosition;
       gl_PointSize = 10.0;
    }
    `
    const fragmentShaderSource = `
    void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
    `
    const program = initShaders(gl, vertexShaderSource, fragmentShaderSource);
    const  aPosition = gl.getAttribLocation(program, 'aPosition');

    // 创建顶点数据
    const points = new Float32Array([
        -0.5, -0.5,
        0.5, -0.5,
        0.0, 0.5
    ])

    // 创建类型区域
    const buffer = gl.createBuffer(); // 创建缓冲区对象
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer); // 绑定缓冲区对象

    /**
     * gl.STATIC_DRAW ：写入一次，多次绘制，数据不会或几乎不会改变。
     * gl.DYNAMIC_DRAW ：写入一次，多次绘制，数据会被频繁地改变。
     * gl.STREAM_DRAW ：写入一次，一次绘制，数据改变频繁，并且只用到少部分数据。
     */
    gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW) // 向缓冲区中写入数据

    /**
     *  参数1：顶点属性指针，表示从缓冲区中的哪个位置开始读取数据。
     *  参数2：每个顶点的分量个数。
     *  参数3：每个元素的数据类型。
     *  参数4：指定元素之间的偏移量。
     *  参数5：指定顶点数组中数据起始位置的偏移量。
     */
    gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0)
    gl.vertexAttrib2f(aPosition, 0.0, 0.0); //直接设置 aPosition 属性为 (0.0, 0.0)。这个方法将 x 和 y 坐标设为 0.0，表示顶点位于画布的中心。顶点着色器会使用这个位置来确定绘制的位置。


    gl.enableVertexAttribArray(aPosition) // 启用顶点属性数组
    gl.drawArrays(gl.POINTS, 0, 3)
</script>
</body>
</html>
